<%@ include file="/WEB-INF/views/common/includes.jsp"%>

<!DOCTYPE html>

<c:if test="${not empty param.error_email}">
	<div class="alert alert-danger">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<i class="icon-ban-circle"></i><strong>Email</strong> already exists
		or it is invalid! Please use another email
	</div>
</c:if>

<c:if test="${not empty param.error_name}">
	<div class="alert alert-danger">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<i class="icon-ban-circle"></i><strong>Username</strong> already
		exists or it is invalid!
	</div>
</c:if>

<c:if test="${not empty param.info}">
	<div class="alert alert-info">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<i class="icon-info-sign"></i><strong>Activation mail</strong> has
		been sent to your mail address!
	</div>
</c:if>

<c:if test="${not empty param.already}">
	<div class="alert alert-warning">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<h4>
			<i class="icon-bell-alt"></i>Warning!
		</h4>
		<p>Your account is already activated!</p>
	</div>
</c:if>

<c:if test="${not empty param.active}">
	<div class="alert alert-success">
		<button type="button" class="close" data-dismiss="alert">
			<i class="icon-remove"></i>
		</button>
		<i class="icon-ok-sign"></i>You <strong>successfully</strong>
		activated your account!
	</div>
</c:if>

<c:if test="${not empty param.deactivate}">
	<div class="col-lg-4"></div>
	<div class="col-lg-4">
		<div class="alert alert-danger">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-exclamation"></i><strong>Your account has
				been deactivated. We sent you an e-mail containing a link to
				activate your account</strong>
		</div>
	</div>
	<div class="col-lg-4"></div>
</c:if>

<c:if test="${not empty recipes}">
	<div class="col-lg-8">
		<div class="panel-heading font-bold text-center"
			style="font-size: 15px">Top Rated Recipes</div>
		<div id="owl-demo" class="owl-carousel owl-theme">
			<c:forEach var="recipe" items="${recipes}">
				<div class="item">
					<section class="panel">

						<header class="panel-heading font-bold">
							<c:url var="goToRecipe"
								value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
							<a href="<c:out value="${goToRecipe}"/>"><c:out
									value="${recipe.recipe_name}" /></a>
						</header>

						<div class="panel-body">
							<c:url var="goToRecipe"
								value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
							<a href="<c:out value="${goToRecipe}"/>"> <img
								src="/recipe/picture/${recipe.id}_medium" width="100%"
								style="height: 350px" alt="Recipe_Image"></a>
						</div>
						<div>
							<footer class="panel-footer">

								<div class="col-lg-8 rating" style="padding-left: 0px">
									<strong style="float: left">RATE:</strong>

									<div style="float: left"
										data-bind="foreach: new Array(full(${recipe.rate}))">
										<i class="icon-star"></i>
									</div>
									<div style="float: left"
										data-bind="foreach: new Array(half(${recipe.rate}))">
										<i class="icon-star-half-empty"></i>
									</div>
									<div style="float: left; margin-right: 5px"
										data-bind="foreach: new Array(empty(${recipe.rate}))">
										<i class="icon-star-empty"></i>
									</div>

									<p id="rate" style="display: none">${recipe.rate}</p>
									<strong>${recipe.rate}</strong> <strong>/5</strong>
								</div>
								<div class="col-lg-4 text-right" style="padding-right: 0px">
									<strong>${recipe.rating_count}</strong> person voted!
								</div>

								<div class="col-lg-12" style="padding-left: 0px">
									<c:url var="thisURL" value="publicProfile">
									</c:url>
									<a
										href="<c:out value="${thisURL}?username=${recipe.recipe_owner}"/>">by
										${recipe.recipe_owner}</a>
								</div>
							</footer>
						</div>
					</section>
				</div>
			</c:forEach>
		</div>
	</div>
</c:if>

<c:if test="${not empty user}">
	<c:if test="${not empty latestrecipes}">
		<div class="col-lg-4">
			<div class="panel-heading font-bold text-center"
				style="font-size: 15px">Recent Recipes In Your Circle</div>
			<div class="panel-group m-b" id="accordion2">
				<c:forEach var="recipe" items="${latestrecipes}">
					<div class="panel">
						<div class="panel-heading">
							<a class="accordion-toggle" data-toggle="collapse"
								data-parent="${recipe.id}" href="#${recipe.id} ">${recipe.recipe_name}</a>
						</div>
						<div id="${recipe.id}" class="panel-collapse" style="height: 0px;">
							<div class="panel-body text-sm">
								<div class="row" style="margin-bottom: 15px">
									<div class="col-sm-6">
										<img src="/recipe/picture/${recipe.id}_small" width="100%"
											style="height: 100px" alt="Recipe_Image">
									</div>
									<div class="col-sm-6">${recipe.description}</div>
								</div>
								<div class="row" style="margin-bottom: 10px">

									<div class="col-sm-12">
										<strong style="float: left">RATE:</strong>

										<div style="float: left"
											data-bind="foreach: new Array(full(${recipe.rate}))">
											<i class="icon-star"></i>
										</div>
										<div style="float: left"
											data-bind="foreach: new Array(half(${recipe.rate}))">
											<i class="icon-star-half-empty"></i>
										</div>
										<div style="float: left; margin-right: 5px"
											data-bind="foreach: new Array(empty(${recipe.rate}))">
											<i class="icon-star-empty"></i>
										</div>

										<p id="rate" style="display: none">${recipe.rate}</p>
										<strong>${recipe.rate}</strong> <strong>/5</strong>
									</div>
								</div>
								<div class="row" style="margin-bottom: 10px">
									<div class="col-sm-6">
										<c:url var="thisURL" value="publicProfile">
										</c:url>
										<a
											href="<c:out value="${thisURL}?username=${recipe.recipe_owner}"/>">by
											${recipe.recipe_owner}</a>
									</div>
								</div>
								<div class="row" style="margin-bottom: 10px">
									<div class="col-sm-4" style="float: right">
										<c:url var="goToRecipe"
											value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
										<a href="<c:out value="${goToRecipe}"/>">Go To Recipe</a>
									</div>
								</div>
							</div>

						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</c:if>
</c:if>

<c:if test="${not empty recommendedRecipes}">
	<div class="col-lg-8" style="margin-top: 55px;">
		<div class="panel-heading font-bold text-center"
			style="font-size: 15px">Recommended Recipes</div>
		<div id="demo1" class="owl-carousel owl-theme">
			<c:forEach var="recipe" items="${recommendedRecipes}">
				<div class="item">
					<section class="panel">
						<header class="panel-heading font-bold">
							<c:url var="goToRecipe"
								value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
							<a href="<c:out value="${goToRecipe}"/>"><c:out
									value="${recipe.recipe_name}" /></a>
						</header>

						<div class="panel-body">
							<c:url var="goToRecipe" value="/recipe/recipeId=${recipe.id}"></c:url>
							<a href="<c:out value="${goToRecipe}"/>"> <img
								src="/recipe/picture/${recipe.id}_medium" width="100%"
								style="height: 350px" alt="Recipe_Image"></a>
						</div>
						<div>
							<footer class="panel-footer">

								<div class="col-lg-8 rating" style="padding-left: 0px">
									<strong style="float: left">RATE:</strong>

									<div style="float: left"
										data-bind="foreach: new Array(full(${recipe.rate}))">
										<i class="icon-star"></i>
									</div>
									<div style="float: left"
										data-bind="foreach: new Array(half(${recipe.rate}))">
										<i class="icon-star-half-empty"></i>
									</div>
									<div style="float: left; margin-right: 5px"
										data-bind="foreach: new Array(empty(${recipe.rate}))">
										<i class="icon-star-empty"></i>
									</div>

									<p id="rate" style="display: none">${recipe.rate}</p>
									<strong>${recipe.rate}</strong> <strong>/5</strong>
								</div>
								<div class="col-lg-4 text-right" style="padding-right: 0px">
									<strong>${recipe.rating_count}</strong> person voted!
								</div>

								<div class="col-lg-12" style="padding-left: 0px">
									<c:url var="thisURL" value="publicProfile">
									</c:url>
									<a
										href="<c:out value="${thisURL}?username=${recipe.recipe_owner}"/>">by
										${recipe.recipe_owner}</a>
								</div>
							</footer>
						</div>
					</section>
				</div>
			</c:forEach>
		</div>
	</div>
</c:if>


<c:if test="${empty user}">
	<div class="col-lg-4">
		<section class="panel">
			<header class="panel-heading font-bold">Not yet a member?
				Sign Up here!</header>
			<div class="panel-body">
				<form action="saveUser" method="POST" enctype="multipart/form-data">
					<div class="form-group">
						<label>Username</label> <input type="text" name="text"
							class="form-control" placeholder="Enter Username">
					</div>
					<div class="form-group">
						<label>Email address</label> <input type="email" name="email"
							class="form-control" placeholder="Enter email">
					</div>

					<div class="form-group">
						<label>Enter Password</label> <input type="password"
							name="password" class="form-control" placeholder="Password">
					</div>

					<div class="form-group text-right">
						<button type="submit" class="btn btn-sm btn-primary">Sign
							Up</button>
					</div>
				</form>
			</div>
		</section>
	</div>
</c:if>

<script>
	var full = function(rate) {
		return parseInt(rate);
	}

	var half = function(rate) {
		if (rate == parseInt(rate)) {
			return 0;
		} else {
			return 1;
		}
	}

	var empty = function(rate) {
		return parseInt(5 - rate);
	}

	$(document).ready(function($) {

		$("#owl-demo").owlCarousel({
			autoPlay : 3000, //Set AutoPlay to 3 seconds
			navigation : true,
			stopOnHover : true,
			singleItem : true

		});

	});

	$(document).ready(function($) {

		$("#demo1").owlCarousel({
			autoPlay : 3000, //Set AutoPlay to 3 seconds
			navigation : true,
			stopOnHover : true,
			singleItem : true

		});

	});
	var StarViewModel = function() {

		
	};

	ko.applyBindings(new StarViewModel());
</script>
